<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .card {
            height: 400px;
            width: 1100px;
            margin: 0 auto;
            margin-bottom: 10px;
            color: #fff;
            font-size: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            letter-spacing: 20px;
        }

        .header {
            width: 100%;
            background-color: #45C96F;
        }

        .floor {
            border-radius: 10px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        }

        .floor:first-child {
            background-color: lightblue;
        }

        .floor:nth-child(2) {
            background-color: lightcoral;
        }

        .floor:nth-child(3) {
            background-color: violet;
        }

        .floor:nth-child(4) {
            background-color: burlywood;
        }

        .floor:nth-child(5) {
            background-color: lightgreen;
        }

        .nav-fixed {
            position: fixed;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            /* background-color: lightgrey; */
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

        }

        .nav-fixed div {
            padding: 14px 10px;
            cursor: pointer;
            background-color: #fff;

        }

        .nav-fixed div.active {
            background-color: red;
            color: #fff;
        }

        .back-top {
            cursor: pointer;
            padding: 10px;
            width: 40px;
            position: fixed;
            bottom: 60px;
            right: 10px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
            text-align: center;
            background-color: #fff;
            opacity: 0;
            transition: all 1s;
        }

        .back-top span {
            display: inline-block;
            transform: rotate(-90deg);
            font-family: 黑体;
            font-weight: 900;
            font-size: 26px;
            color: #444;
        }

        .footer {
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="header card">
        轮播图区域
    </div>
    <div class="container">
        <div class="card floor floor-1">
            男装
        </div>
        <div class="card floor floor-2">
            女装
        </div>
        <div class="card floor floor-3">
            童装
        </div>
        <div class="card floor floor-4">
            男鞋
        </div>
        <div class="card floor floor-5">
            女鞋
        </div>
    </div>
    <div class="card footer">网页底部</div>
    <!-- 导航: 固定定位 -->
    <div class="nav-fixed">
        <div>男装</div>
        <div>女装</div>
        <div>童装</div>
        <div>男鞋</div>
        <div>女鞋</div>
    </div>
    <!-- 返回顶部按钮: 固定定位 -->
    <div class="back-top">
        <span>&gt;</span>
        返回顶部
    </div>
    <script>
        var navs = document.querySelectorAll('.nav-fixed div')
        var floors = document.querySelectorAll('.floor')
        navs.forEach(function (nav, index) {
            nav.onclick = function () {
                // 获取当前被点击的导航对应内容区域的offsetTop
                // console.log(floors[index].offsetTop);
                // 移动网页滚动条
                window.scrollTo({
                    top:floors[index].offsetTop,
                    behavior:"smooth"
                })
            }
        })
    </script>

</body>

</html>